<template>
	<view class="emain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="color000 font-bold" :style="{'opacity': titleOp}">7737.摇光(国野)</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="ml-2 mt-6 mb-3">
			<image class="rounded mb-3" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png" style="width: 150rpx;height: 150rpx; border: 1px solid #fff;"></image>
			<view class="d-flex d-flex-middle">
				<view class="colorfff mr-5 font-bold" style="font-size: 42rpx;">7737.摇光(国野)</view>
				<view class="d-flex-btn mt-1">
					<view class="sex d-flex-btn mr-1 ml-2">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<view class="colorfff font20">ID 725339052</view>
				</view>
			</view>
			<view class=" mb-2" style="overflow: hidden;">
				<view class="colorfff mt-1">IP属地：辽宁</view>
			</view>
			<view class="colorfff font28 mt-5 d-flex mb-2">
				<view class="mr-3">
					<text class="font-bold font32">24</text>
					粉丝
				</view>
				<view class="">
					<text class="font-bold font32">337</text>
					访客
				</view>
			</view>
			<view class="colorfff font26 mb-2">下单之前先咨询。百段打野,双区有号。</view>
			<view class="d-flex d-flex-middle">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%20175.png" style="width: 60rpx; height: 60rpx;"></image>
				<text class="colorfff ml-2 mr-1">王者荣耀</text>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%2034.png" style="width: 20rpx; height: 20rpx;"></image>
			</view>
		</view>
		<view class="bg-fff" style="width: 100%; min-height: 50vh; margin: 0 auto; border-radius: 30rpx 30rpx 0 0; overflow: hidden;">
			<view class="d-flex mt-5 mb-4 ml-2">
				<view class="d-flex-column d-flex-middle" v-for="i in tabList" :key="i.id" @click="changeTabs(i.id)">
					<view :class="['font32','font-bold','mb-1', currentTab == i.id? 'currentTab' : '']" style="color: #878787; padding: 0 20rpx;">{{i.title}}</view>
					<view v-if="currentTab == i.id" class="rounded15" style="width: 60rpx; height: 12rpx; background-color: #2ca5df;"></view>
				</view>
			</view>
			<view class="" v-if="currentTab == 0">
				<view class="" style="width: 92%; margin: 0 auto;">
					<view class="font-bold font28" style="color: #878787;">2024-09-20 9:27</view>
					<view class="font28 mb-1" style="color: #878787;">嘟嘟</view>
					<view class="" style="height: 530rpx; overflow: hidden;">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202360.png" style="width: 100%; height: 530rpx;"></image>
					</view>
				</view>
			</view>
			<view class="" v-if="currentTab == 1">
				<view class="" style="width: 92%; margin: 0 auto;">
					<view class="font34 mb-5 ml-1 font-bold" style="color: #878787;">账号等级</view>
					<view class="d-flex d-flex-around mb-3">
						<view class="level d-flex d-flex-column d-flex-middle mr-2">
							<text class="mb-1">魅力值</text>
							<image class="mb-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level1.png" mode="heightFix" style="height: 120rpx;"></image>
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/sun.png" style="width: 26rpx;height:26rpx"></image>
						</view>
						<view class="level d-flex d-flex-column d-flex-middle mr-2">
							<text class="mb-1">财富值</text>
							<image class="mb-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level2.png" mode="heightFix" style="height: 120rpx;"></image>
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/sun.png" style="width: 26rpx;height:26rpx"></image>
						</view>
						<view class="level d-flex d-flex-column d-flex-middle">
							<text class="mb-1">经验值</text>
							<image class="mb" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level3.png" mode="heightFix" style="height: 120rpx;"></image>
							<text class="font-bold font22">Lv.30</text>
						</view>
					</view>
					<view class="font34 mb-4 ml-1 font-bold" style="color: #878787;">个性签名</view>
					<view class="mb-4" style="overflow: hidden;">
						<view class="text-center mt-6 mb-7">下单之前先咨询。百段打野,双区有号。</view>
					</view>
					<view class="d-flex d-flex-between">
						<view class="font34 ml-1 font-bold" style="color: #878787;">勋章墙</view>
						<view class="d-flex-btn">
							<image class="mr-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204533.png" style="width: 50rpx; height: 70rpx;"></image>
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%2051006.png" style="width: 20rpx; height: 30rpx;"></image>
						</view>
					</view>
					<view class="font34 ml-1 mt-100 font-bold mb-2" style="color: #878787;">礼物墙</view>
					<view class="d-flex d-flex-between d-flex-middle mb-3" style="background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202223.png); width: 100%; height: 76rpx; background-size: 100%; 100%">
						<view class="d-flex-btn">
							<image class="ml-4 mr-2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202585.png" style="width: 50rpx; height: 40rpx;"></image>
							<text class="font-bold" style="color: #ffdbaa;">礼物图鉴</text>
						</view>
						<view class="font-bold mr-6" style="color: #ffdbaa;">已集齐：0</view>
					</view>
					<view class="colorfff py-2 text-center rounded50 font30" style="background: #C0D4FF; width: 50%; margin: 0 auto;">十二星座-处女座</view>
					<view class="mb-7 d-flex d-flex-between mt-3">
						<view class="d-flex-column d-flex-middle" style="width: 38%;">
							<view class="px-2 py-1 rounded15 d-flex-btn" style="background: #dfe7f8; display: inline-block;">
								<text class="mr-2 ml-1" style="color: #C0D4FF;">星座成就</text>
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%2051016.png" style="width: 25rpx; height: 35rpx;"></image>
							</view>
							<image class="pt-3 pb-2" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level1.png" mode="heightFix" style="height: 200rpx;"></image>
							<text class="font30" style="color: #878787;">未点亮</text>
						</view>
						<view class="d-flex-column d-flex-middle" style="width: 62%;">
							<view class="">
								<view class="px-2 py-1 rounded15 d-flex-btn" style="background: #dfe7f8; display: inline-block;">
									<text class="mr-2 ml-1" style="color: #C0D4FF;">星座成就</text>
									<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%2051016.png" style="width: 25rpx; height: 35rpx;"></image>
								</view>
							</view>
							<view class="d-flex d-flex-between d-flex-middle" style="flex: 1;">
								<view class="d-flex-column d-flex-middle mr-3">
									<image class="pt-5 pb-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level1.png" mode="heightFix" style="height: 130rpx;"></image>
									<text class="font30">礼物</text>
									<text class="font30 mt-2" style="color: #878787;">未获得</text>
								</view>
								<view class="d-flex-column d-flex-middle ml-4">
									<image class="pt-5 pb-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/level3.png" mode="heightFix" style="height: 130rpx;"></image>
									<text class="font30">礼物</text>
									<text class="font30 mt-2" style="color: #878787;">未获得</text>
								</view>
							</view>
						</view> 
					</view>
					<view class="mb-3 d-flex d-flex-between d-flex-middle">
						<view class="d-flex font32">
							<view :class="['mr-2','py-1','px-3', 'rounded30', currentGiftTab == 0? 'currentGiftTab' : '']" @click="changGiftTab(0)">近90天</view>
							<view :class="['py-1','px-3', 'rounded30', currentGiftTab == 1? 'currentGiftTab' : '']" @click="changGiftTab(1)">全部</view>
						</view>
						<view class="font30 font-bold" style="color: #99999a;">
							<text>未收到 ></text>
						</view>
					</view>
					<view class="giftList" v-if="currentGiftTab == 0">
						<view class="item" v-for="i in 9" :key="i.id">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/20241111160119.png"></image>
							<view class="giftName">礼物</view>
							<view class="quantity">×2</view>
						</view>
					</view>
					<view class="giftList" v-if="currentGiftTab == 1">
						<view class="item" v-for="i in 5" :key="i.id">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/20241111160119.png"></image>
							<view class="giftName">礼物</view>
							<view class="quantity">×2</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mx-3" v-if="currentTab == 2">
				<view class="d-flex d-flex-around colorfff rounded50 font32" style="background: #c7c9ca; width: 330rpx;">
					<view :class="['rounded50', 'text-center', bosomFriendTab == 0? 'friendtab-b' : '']" @click="ChangebosomFriendTab(0)" style="width: 150rpx; padding: 8rpx 0 10rpx;">挚友柜</view>
					<view :class="['rounded50', 'text-center', bosomFriendTab == 1? 'friendtab-p' : '']" @click="ChangebosomFriendTab(1)" style="width: 180rpx; padding: 8rpx 0 10rpx;">挚友小屋</view>
				</view>
				<view class="" v-if="bosomFriendTab == 0" style="min-height: 70vh;">
					0
				</view>
				<view class="d-flex d-flex-center pb-15 mb-15 position-relative" v-if="bosomFriendTab == 1" style="min-height: 40vh;">
					<view class="d-flex font32 d-flex-center" style="width: 100%; background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201751.png); background-size: 70% auto; background-repeat: no-repeat; background-position: 140rpx 60rpx;">
						<view class="d-flex-column d-flex-middle mr-4">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png" mode="heightFix" style="height: 180rpx; border: 2px solid #d5d4d3; border-radius: 50%;"></image>
							<text class="mt-1">九天</text>
						</view>
						<view class="d-flex-column d-flex-middle ml-4">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png" mode="heightFix" style="height: 180rpx; border: 2px solid #d5d4d3; border-radius: 50%;"></image>
							<text class="mt-1">花言</text>
						</view>
					</view>
					<view class="position-absolute" style="top: 20%;">
						<!-- <image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201755.png" mode="heightFix" style="h100rpx"></image> -->
						<view class="colorfff linerbg pt-1 pb-1 pl-5 pr-2 rounded50">初见之欢</view>
					</view>
				</view>
				<view class="d-flex-btn friendbtn-bg position-fixed" style="right: 50rpx; bottom: 240rpx;">成为挚友</view>
			</view>
			<view class="" v-if="currentTab == 3">
				4
			</view>
		</view>
		<view class="d-flex d-flex-around position-fixed" style="bottom: 45rpx; width: 90%; left: 50%; transform: translateX(-50%);">
			<view class="d-flex-btn btn-edit">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%20275.png" style="width: 30rpx; height: 30rpx;"></image>
				<text class="ml-1">关注</text>
			</view>
			<view class="d-flex-btn btn-edit">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%20275.png" style="width: 30rpx; height: 30rpx;"></image>
				<text class="ml-1">打招呼</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				titleOp: 0,
				currentTab: 0,
				currentGiftTab: 0,
				bosomFriendTab: 0,
				tabList:[{
					id: 0,
					title: '动态3'
				},
				{
					id: 1,
					title: '关于Ta'
				},
				{
					id: 2,
					title: '挚友'
				},
				{
					id: 3,
					title: '技能'
				}]
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			this.titleOp = Math.round(scrollTop) / 250
			if (scrollTop > 20) {
				this.bgcolor = '#ffffff'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			goBack(){
				manner.goBack()
			},
			changeTabs(type) {
				this.currentTab = type
			},
			changGiftTab(type) {
				this.currentGiftTab = type
			},
			ChangebosomFriendTab(type) {
				this.bosomFriendTab = type
			}
		}
	}
</script>

<style scoped>
.emain{
	background-image: url('https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203377.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 55vh;
	max-height: 55vh;
	position: relative;
}
.charts-box {
	width: 300rpx;
	height: 300rpx;
}
.color739bce{color:#739bce}
.color597bac{color:#597bac}
.bgC7C8C9{background: #4b5f87;width: 170rpx;}
.plus-img{
	width: 180rpx;
	height: 180rpx;
	border-radius: 36rpx;
	background-color: #1e3767;
	color: #385fa5;
}
.colorg7{
	color: rgba(255, 255, 255, .5)
}
.xuanzhe{
	border: 1px solid #C7C8C9;
	border-radius: 30rpx;
	padding:10rpx 20rpx;
	color: #ffffff;
	font-size: 26rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.onxz{
	background: #CFF0FB;
	color: #46C4FF;
}
.btn-edit{
	background-image: linear-gradient(to right, #e65fd0, #69adf8);
	width: 38%;
	color: #fff;
	font-size: 36rpx;
	padding: 20rpx;
	border-radius: 50rpx;
}
.giftList {
	width: 100%;
	min-height: 770rpx;
	padding-bottom: 150rpx;
	margin-bottom: 30px;
	border-radius: 20rpx;
	display: flex;
	justify-content: left;
	align-content: flex-start;
	flex-wrap: wrap;
}
.giftList .item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30rpx;
}
.giftList .item image {
	width: 80px;
	height: 80px;
}
.currentTab {
	font-size: 34rpx;
	color: #231815 !important;
}
.currentGiftTab {
	background-color: #58e0a9;
}
.friendtab-b {
	background-image: linear-gradient(to right, #126efb, #2ac3fe);
}
.friendtab-p {
	background-image: linear-gradient(45deg, #e322d2, #feae02);
}
.friendbtn-bg {
	width: 100rpx;
	height: 100rpx;
	color: #fff;
	font-size: 36rpx;
	border-radius: 50%;
	text-align: center;
	padding: 12rpx;
	background-image: linear-gradient(to right, #5fb1f9, #85f2cb);
}
</style>

